import Taro, { Component } from '@tarojs/taro';
import { View, Image, Text, Button,Input ,Label} from '@doctorwork/components';
import { connect } from '@tarojs/redux';
import Navigate from '../../components/Navigate/index';
import { rewriteAddMTA } from './../../model/utils/rewrite';
import './index.styl';
import { uploadFile } from '../../utils';

@connect(({ mine,index }) => ({
    ...mine,
    ...index
}))
@rewriteAddMTA
export default class Mine extends Component {
    config = {
        navigationBarTitleText: '个人中心'
    };

    componentDidMount(){
        const _this = this;
        // 在页面中定义激励视频广告
        this.audioAd = null;

        // 在页面onLoad回调事件中创建激励视频广告实例
        // if (wx.createRewardedaudioAd) {
        //     this.audioAd = wx.createRewardedaudioAd({
        //         adUnitId: 'adunit-79f597a0a14de19c'
        //     });
        //     this.audioAd.onLoad(() => {
        //         console.log('执行完毕');
        //     });
        //     this.audioAd.onError((err) => {
        //         wx.showToast({
        //             title: '视频拉取错误，请重试',
        //             icon: 'none'
        //         });
        //     });
        //     this.audioAd.onClose((res) => {
        //         console.log('视频播放完毕');
        //         if (res && res.isEnded) {
        //             // 正常播放结束，可以下发游戏奖励
        //             setTimeout(()=>{
        //                 _this.updateIntegral();
        //             },2000);
        //         }
        //         wx.showToast({
        //             title: '谢谢支持! ^v^',
        //             icon: 'none'
        //         });
        //     });
        // }
    }
    componentDidShow() {
        this.props.dispatch({
            type: 'mine/getUserInfo'
        });
    }
    jumpPrice() {
        this.props.dispatch({
            type: '$router/forward',
            payload: {
                url: '/pages/price/index'
            }
        });
    }
    // jumpTips() {
    //     this.props.dispatch({
    //         type: '$router/forward',
    //         payload: {
    //             url: '/pages/tipList/index'
    //         }
    //     });
    // }
    jumpCar(){
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : '/pages/car/index',
            }
        });
    }

    goAdds(){
        const _this = this;


        // 用户触发广告后，显示激励视频广告
        if (this.audioAd) {
            this.audioAd.show().catch(() => {
                // 失败重试
                _this.audioAd.load()
                    .then(() => _this.audioAd.show())
                    .catch(err => {
                        console.log('激励视频 广告显示失败');
                    });
            });
        }
        
    }

    updateIntegral(){
        const time = Date.now().toString();
        let encryption  = 0;
        for(var i = 0;i< time.length;i++){
            encryption += Number(time[i]);
        }
        encryption = encryption * 33;
        this.props.dispatch({
            type: 'mine/updateIntegral',
            payload: {
                time,encryption
            }
        });
    }
    /**
     * 获取用户信息
     * @param {*} e 
     */
    getUserProfile(){
        const _this = this;
        wx.getUserProfile({
            desc: '获取您的头像和昵称用于登录',
            success: (data)=>{
                console.log(data);
                const userInfo = data.userInfo;
                _this.props.dispatch({
                    type: 'mine/updateUserInfo',
                    payload: userInfo
                });
            },
            fail: ()=>{
                wx.showToast({
                    title: '获取失败,请重新获取',
                });
            }
        });
    }
    /**
     * 选择投降
     * @param {*} e 
     */
    async onChooseAvatar(e){
        console.log(e);
        const { userInfo} = this.props;
        const avatarUrl = e.detail.avatarUrl;

        const avatar = await uploadFile(avatarUrl);
        userInfo.avatar = avatar;
        this.props.dispatch({
            type: 'mine/updateUserInfo',
            payload: userInfo
        });
    }
    /**
     * 输入昵称
     * @param {*} e 
     */
    onInput(e){
        const { userInfo} = this.props;
        
        console.log(e);
        userInfo.nickName = e.detail.value;
        this.props.dispatch({
            type: 'mine/updateUserInfo',
            payload: userInfo
        });

    }

    render() {

        const {userData, userInfo , showTips} = this.props;
        return (
            <View className='container'>
                <Navigate
                    title='个人中心'
                    color='black'
                    backgroundColor='white'
                    backTextColor='black'
                />
                
                <View className='user-center'>
                    
                    <View className='user-header'>
                        <Button className='avatar' open-type='chooseAvatar' onChooseavatar={this.onChooseAvatar.bind(this)}>
                            <Image className='avatar' src={userInfo.avatar||'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'}></Image>
                        </Button> 
                        <Input type='nickname' className='nick-name' value={userInfo.nickName} placeholder='请输入昵称' onBlur={this.onInput.bind(this)} />
                        <Image src={require('./imgs/integer.png')} className='icon'></Image>
                        <Label className='integral'>{userInfo.integral||0}</Label>
                    </View>

                    <View className='user-list'>
                        <View className='user-item' onClick={this.jumpCar.bind(this)} data-name='我的车辆'>
                            <View className='flex'>
                                <Image src={require('./imgs/car.png')} className='icon'></Image>
                                <Button className='title'>我的车辆</Button>
                            </View>
                            <Text className='iconfont icon-right'>&#xe619;</Text>

                        </View>
                        <View className='user-item' onClick={this.jumpPrice.bind(this)} data-name='今日油价'>
                            <View className='flex'>
                                <Image src={require('./imgs/money.png')} className='icon'></Image>
                                <Button className='title'>今日油价</Button>
                            </View>
                            <Text className='iconfont icon-right'>&#xe619;</Text>

                        </View>
                        {/* {
                            showTips && <View className='user-item' onClick={this.jumpTips.bind(this)} data-name='每日小知识'>
                                <View className='flex'>
                                    <Image src={require('./imgs/book.png')} className='icon'></Image>
                                    <Button className='title'>每日小知识</Button>
                                </View>
                                <Text className='iconfont icon-right'>&#xe619;</Text>

                            </View>
                        } */}
                        <View className='user-item'  >
                            {/* <Image className='thirdLeftImageView' src='https://img.tanjiu.cn/home/BA26188807251376.png'></Image> */}
                            <View className='flex'>
                                <Image src={require('./imgs/service.png')} className='icon'></Image>
                                <Button className='title' open-type='contact'>联系客服</Button>
                            </View>
                            <Text className='iconfont icon-right'>&#xe619;</Text>
                        </View>
                        <View className='user-item'>
                            <View className='flex'>
                                <Image src={require('./imgs/question.png')} className='icon'></Image>
                                <Button className='title' open-type='feedback'>意见反馈</Button>
                            </View>
                            <Text className='iconfont icon-right'>&#xe619;</Text>

                        </View>
                        {/* <View className='user-item' onClick={this.goAdds.bind(this)} data-name="看广告鼓励一下">
                            <View className='flex'>
                                <Image src={require('./imgs/pingtuan.png')} className='icon'></Image>
                                <Button className='title' >看广告鼓励一下</Button>
                            </View>
                            <Text className='iconfont icon-right'>&#xe619;</Text>

                        </View> */}
                    </View>
                </View>
            </View>

        );
    }
}
